<template>
  <div class="home">
    <div class="mui-flex fdc h100">
      <div class="mui-flex aic mui-flex__cell">
        <div class="mui-flex__cell h100">
          <Comp1 />
        </div>
        <div class="mui-flex__cell h100">
          <Comp1 />
        </div>
        <div class="mui-flex__cell h100">
          <Comp1 />
        </div>
      </div>
      <div class="mui-flex aic  mui-flex__cell">
        <div class="mui-flex__cell h100">
          <Comp1 />
        </div>
        <div class="mui-flex__cell h100">
          <Comp1 />
        </div>
        <div class="mui-flex__cell h100">
          <Comp1 />
        </div>
      </div>
      <div class="mui-flex aic mui-flex__cell">
        <div class="mui-flex__cell h100">
          <Comp1 />
        </div>
        <div class="mui-flex__cell h100">
          <Comp1 />
        </div>
        <div class="mui-flex__cell h100">
          <Comp1 />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Comp1 from './Components/Comp1/Index.vue';
import useScale from '@/hooks/useScale';
export default defineComponent({
  name: 'Home',
  components: { Comp1 },
  setup() {
    useScale();
    return {};
  }
});
</script>

<style lang="less" scoped>
.home {
  background: #eee;
  .h100 {
    height: 100%;
  }
}
</style>